// css 版-----------------------------------------------------------------
let getCss = _ => {
    let css = [];

    // --px_1: 1px;
    let varStr = `.var{`;
    for (let i = 1; i < 501; i++) {
        if (i < 100) {
            varStr += `--px_${i}:${i}px;`;
        } else {
            if (i % 10 === 0) {
                varStr += `--px_${i}:${i}px;`;
            }
        }
    }
    for (let i = 1; i < 101; i++) {
        varStr += `--per_${i}:${i}%;`;
    }
    varStr += `--color_red:#ff0000;`;
    varStr += `--color_black:#000;`;
    varStr += `--color_white:#fff;`;
    varStr += `}`;

    css.push(varStr);
    // console.log(varStr);

// .m_1 {
//     margin: var(--1px);
// }
// .m_auto {
//     margin: 0 auto;
// }
    let marginStr = ``;
    marginStr += `.m_auto{margin:0 auto;}`;
    marginStr += `.m_0{margin:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            marginStr += `.m_${i}{margin:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_${i}{margin:var(--px_${i});}`;
        }
    }

// .mw_1 {
//     margin: 0 var(--1px);
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            marginStr += `.mw_${i}{margin:0 var(--px_${i});}`;
        } else if (i % 5 === 0) {
            marginStr += `.mw_${i}{margin:0 var(--px_${i});}`;
        }
    }

// .mh_1 {
//     margin: var(--1px) 0;
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            marginStr += `.mh_${i}{margin:var(--px_${i}) 0;}`;
        } else if (i % 5 === 0) {
            marginStr += `.mh_${i}{margin:var(--px_${i}) 0;}`;
        }
    }

// .m_t_1 {
//     margin-top: var(--1px);
// }
    marginStr += `.m_t_0{margin-top:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_t_${i}{margin-top:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_t_${i}{margin-top:var(--px_${i});}`;
        }
    }
    marginStr += `.m_r_0{margin-right:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_r_${i}{margin-right:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_r_${i}{margin-right:var(--px_${i});}`;
        }
    }
    marginStr += `.m_b_0{margin-bottom:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_b_${i}{margin-bottom:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_b_${i}{margin-bottom:var(--px_${i});}`;
        }
    }
    marginStr += `.m_l_0{margin-left:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_l_${i}{margin-left:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_l_${i}{margin-left:var(--px_${i});}`;
        }
    }

    css.push(marginStr);
    // console.log(marginStr);

// .p_1 {
//     padding: var(--1px);
// }
// .p_auto {
//     padding: 0 auto;
// }
    let paddingStr = ``;
    paddingStr += `.p_0{padding:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            paddingStr += `.p_${i}{padding:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_${i}{padding:var(--px_${i});}`;
        }
    }

// .pw_1 {
//     padding: 0 var(--1px);
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            paddingStr += `.pw_${i}{padding:0 var(--px_${i});}`;
        } else if (i % 5 === 0) {
            paddingStr += `.pw_${i}{padding:0 var(--px_${i});}`;
        }
    }

// .ph_1 {
//     padding: var(--1px) 0;
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            paddingStr += `.ph_${i}{padding:var(--px_${i}) 0;}`;
        } else if (i % 5 === 0) {
            paddingStr += `.ph_${i}{padding:var(--px_${i}) 0;}`;
        }
    }

// .p_t_1 {
//     padding-top: var(--1px);
// }
    paddingStr += `.p_t_0{padding-top:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_t_${i}{padding-top:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_t_${i}{padding-top:var(--px_${i});}`;
        }
    }
    paddingStr += `.p_r_0{padding-right:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_r_${i}{padding-right:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_r_${i}{padding-right:var(--px_${i});}`;
        }
    }
    paddingStr += `.p_b_0{padding-bottom:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_b_${i}{padding-bottom:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_b_${i}{padding-bottom:var(--px_${i});}`;
        }
    }
    paddingStr += `.p_l_0{padding-left:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_l_${i}{padding-left:var(--px_${i});}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_l_${i}{padding-left:var(--px_${i});}`;
        }
    }
    css.push(paddingStr);
    // console.log(paddingStr);

// .w_p_1 {
//     width: 1%;
// }
    let widthStr = ``;
    widthStr += `.w_p_0{width:0;}`;
    for (let i = 1; i < 101; i++) {
        widthStr += `.w_p_${i}{width:var(--per_${i});}`;
    }
// .w_1 {
//     width: 1px;
// }
    widthStr += `.w_0{width:0;}`;
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            widthStr += `.w_${i}{width:var(--px_${i});}`;
        } else if (i % 10 === 0) {
            widthStr += `.w_${i}{width:var(--px_${i});}`;
        }
    }
    css.push(widthStr);
    // console.log(widthStr);

// .h_p_1 {
//     height: 1%;
// }
    let heightStr = ``;
    heightStr += `.h_p_0{height:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i % 10 === 0) {
            heightStr += `.h_p_${i}{height:var(--per_${i});}`;
        }
    }
// .h_1 {
//     height: 1px;
// }
    heightStr += `.h_0{height:0;}`;
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            heightStr += `.h_${i}{height:var(--px_${i});}`;
        } else if (i % 10 === 0) {
            heightStr += `.h_${i}{height:var(--px_${i});}`;
        }
    }
    css.push(heightStr);
    // console.log(heightStr);

// .f_s_12 {
//     font-size: 12px;
// }
    let fontStr = ``;
    for (let i = 12; i < 58; i++) {
        if (i % 2 === 0) {
            fontStr += `.f_s_${i}{font-size:var(--px_${i});}`;
        }
    }
    css.push(fontStr);
    // console.log(fontStr);

// .color_red {
//     color: red;
// }
    let colorStr = ``;
    colorStr += `.color_red {color:var(--color_red)}`;
    colorStr += `.color_black {color:var(--color_black)}`;
    colorStr += `.color_white {color:var(--color_white)}`;
    css.push(colorStr);
    // console.log(colorStr);

// .bg_red {
//     background-color: red;
// }
    let bgStr = ``;
    bgStr += `.bg_red {background-color:var(--color_red)}`;
    bgStr += `.bg_black {background-color:var(--color_black)}`;
    bgStr += `.bg_white {background-color:var(--color_white)}`;
    css.push(bgStr);
    // console.log(bgStr);

// .left_1{
//     left:1px;
// }

    let left = ``;
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.left_${i}{left:var(--px_${i});}`;
        } else if (i % 10 === 0) {
            left += `.left_${i}{left:var(--px_${i});}`;
        }
    }
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.right_${i}{right:var(--px_${i});}`;
        } else if (i % 10 === 0) {
            left += `.right_${i}{right:var(--px_${i});}`;
        }
    }
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.top_${i}{top:var(--px_${i});}`;
        } else if (i % 10 === 0) {
            left += `.top_${i}{top:var(--px_${i});}`;
        }
    }
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.bottom_${i}{bottom:var(--px_${i});}`;
        } else if (i % 10 === 0) {
            left += `.bottom_${i}{bottom:var(--px_${i});}`;
        }
    }
    css.push(left);
    // console.log(left);

    console.log(css.join(``));
}


// scss 版-----------------------------------------------------------------
let getScss = _ => {
    let scss = [];

    // $1px: 1px;
    let varStr = ``;
    for (let i = 1; i < 501; i++) {
        if (i < 100) {
            varStr += `$px_${i}:${i}px;`;
        } else {
            if (i % 10 === 0) {
                varStr += `$px_${i}:${i}px;`;
            }
        }
    }
    for (let i = 1; i < 101; i++) {
        varStr += `$per_${i}:${i}%;`;
    }
    varStr += `$color_red:#ff0000;`;
    varStr += `$color_black:#000;`;
    varStr += `$color_white:#fff;`;

    scss.push(varStr);
    // console.log(varStr);

// .m_1 {
//     margin: $1px;
// }
// .m_auto {
//     margin: 0 auto;
// }
    let marginStr = ``;
    marginStr += `.m_auto{margin:0 auto;}`;
    marginStr += `.m_0{margin:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            marginStr += `.m_${i}{margin:$px_${i};}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_${i}{margin:$px_${i};}`;
        }
    }

// .mw_1 {
//     margin: 0 $1px;
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            marginStr += `.mw_${i}{margin:0 $px_${i};}`;
        } else if (i % 5 === 0) {
            marginStr += `.mw_${i}{margin:0 $px_${i};}`;
        }
    }

// .mh_1 {
//     margin: $1px) 0;
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            marginStr += `.mh_${i}{margin:$px_${i} 0;}`;
        } else if (i % 5 === 0) {
            marginStr += `.mh_${i}{margin:$px_${i} 0;}`;
        }
    }

// .m_t_1 {
//     margin-top: $1px;
// }
    marginStr += `.m_t_0{margin-top:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_t_${i}{margin-top:$px_${i};}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_t_${i}{margin-top:$px_${i};}`;
        }
    }
    marginStr += `.m_r_0{margin-right:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_r_${i}{margin-right:$px_${i};}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_r_${i}{margin-right:$px_${i};}`;
        }
    }
    marginStr += `.m_b_0{margin-bottom:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_b_${i}{margin-bottom:$px_${i};}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_b_${i}{margin-bottom:$px_${i};}`;
        }
    }
    marginStr += `.m_l_0{margin-left:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            marginStr += `.m_l_${i}{margin-left:$px_${i};}`;
        } else if (i % 5 === 0) {
            marginStr += `.m_l_${i}{margin-left:$px_${i};}`;
        }
    }
    scss.push(marginStr);
    // console.log(marginStr);

// .p_1 {
//     padding: $1px;
// }
// .p_auto {
//     padding: 0 auto;
// }
    let paddingStr = ``;
    paddingStr += `.p_0{padding:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            paddingStr += `.p_${i}{padding:$px_${i};}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_${i}{padding:$px_${i};}`;
        }
    }

// .pw_1 {
//     padding: 0 $1px;
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            paddingStr += `.pw_${i}{padding:0 $px_${i};}`;
        } else if (i % 5 === 0) {
            paddingStr += `.pw_${i}{padding:0 $px_${i};}`;
        }
    }

// .ph_1 {
//     padding: $1px) 0;
// }
    for (let i = 1; i < 101; i++) {
        if (i < 30) {
            paddingStr += `.ph_${i}{padding:$px_${i} 0;}`;
        } else if (i % 5 === 0) {
            paddingStr += `.ph_${i}{padding:$px_${i} 0;}`;
        }
    }

// .p_t_1 {
//     padding-top: $1px;
// }
    paddingStr += `.p_t_0{padding-top:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_t_${i}{padding-top:$px_${i};}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_t_${i}{padding-top:$px_${i};}`;
        }
    }
    paddingStr += `.p_r_0{padding-right:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_r_${i}{padding-right:$px_${i};}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_r_${i}{padding-right:$px_${i};}`;
        }
    }
    paddingStr += `.p_b_0{padding-bottom:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_b_${i}{padding-bottom:$px_${i};}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_b_${i}{padding-bottom:$px_${i};}`;
        }
    }
    paddingStr += `.p_l_0{padding-left:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i < 50) {
            paddingStr += `.p_l_${i}{padding-left:$px_${i};}`;
        } else if (i % 5 === 0) {
            paddingStr += `.p_l_${i}{padding-left:$px_${i};}`;
        }
    }
    scss.push(paddingStr);
    console.log(paddingStr);

// .w_p_1 {
//     width: 1%;
// }
    let widthStr = ``;
    widthStr += `.w_p_0{width:0;}`;
    for (let i = 1; i < 101; i++) {
        widthStr += `.w_p_${i}{width:$per_${i};}`;
    }
// .w_1 {
//     width: 1px;
// }
    widthStr += `.w_0{width:0;}`;
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            widthStr += `.w_${i}{width:$px_${i};}`;
        } else if (i % 10 === 0) {
            widthStr += `.w_${i}{width:$px_${i};}`;
        }
    }
    scss.push(widthStr);
    console.log(widthStr);

// .h_p_1 {
//     height: 1%;
// }
    let heightStr = ``;
    heightStr += `.h_p_0{height:0;}`;
    for (let i = 1; i < 101; i++) {
        if (i % 10 === 0) {
            heightStr += `.h_p_${i}{height:$per_${i};}`;
        }
    }
// .h_1 {
//     height: 1px;
// }
    heightStr += `.h_0{height:0;}`;
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            heightStr += `.h_${i}{height:$px_${i};}`;
        } else if (i % 10 === 0) {
            heightStr += `.h_${i}{height:$px_${i};}`;
        }
    }
    scss.push(heightStr);
    console.log(heightStr);

// .f_s_12 {
//     font-size: 12px;
// }
    let fontStr = ``;
    for (let i = 12; i < 58; i++) {
        if (i % 2 === 0) {
            fontStr += `.f_s_${i}{font-size:$px_${i};}`;
        }
    }
    console.log(fontStr);
    scss.push(fontStr);

// .color_red {
//     color: red;
// }
    let colorStr = ``;
    colorStr += `.color_red {color:$color_red}`;
    colorStr += `.color_black {color:$color_black}`;
    colorStr += `.color_white {color:$color_white}`;
    console.log(colorStr);
    scss.push(colorStr);

// .bg_red {
//     background-color: red;
// }
    let bgStr = ``;
    bgStr += `.bg_red {background-color:$color_red}`;
    bgStr += `.bg_black {background-color:$color_black}`;
    bgStr += `.bg_white {background-color:$color_white}`;
    console.log(bgStr);
    scss.push(bgStr);

// .left_1{
//     left:1px;
// }
    let left = ``;
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.left_${i}{left:$px_${i};}`;
        } else if (i % 10 === 0) {
            left += `.left_${i}{left:$px_${i};}`;
        }
    }
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.right_${i}{right:$px_${i};}`;
        } else if (i % 10 === 0) {
            left += `.right_${i}{right:$px_${i};}`;
        }
    }
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.top_${i}{top:$px_${i};}`;
        } else if (i % 10 === 0) {
            left += `.top_${i}{top:$px_${i};}`;
        }
    }
    for (let i = 1; i < 501; i++) {
        if (i < 101) {
            left += `.bottom_${i}{bottom:$px_${i};}`;
        } else if (i % 10 === 0) {
            left += `.bottom_${i}{bottom:$px_${i};}`;
        }
    }
    scss.push(left);
    console.log(left);

    console.log(scss.join(``));
}

// getCss();
// getScss();


let widthStr = ``;
for (let i = 100; i < 301; i++) {
    widthStr += `.w_${i}{width:$px_${i};}`;
}
console.log(widthStr);

// $1px: 1px;
let varStr = ``;
for (let i = 101; i < 301; i++) {
    varStr += `$px_${i}:${i}px;`;
}
console.log(varStr);

